<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            padding: 18vw 5vw 10vw;
        }
        input{
            width: 85vw;
            height: 10vw;
            outline: none;
            border: none;
            border-bottom: 1px solid grey;
            margin-bottom: 5vw;
        }
        button{
            width: 85vw;
            height: 10vw;
            outline: none;
            border: none;
            border-radius: 5vw;
            background: grey;
            margin: 5vw 0;
        }
        #app div{
            display: flex;
            justify-content: space-between;
        }
        #app div span{
            color: aqua;
        }
        #app p{
            font-size: 3vw;
            margin-top: 50vw;
        }
        #app p input{
            width: 3vw;
            height: 3vw;
        }
        #app p span{
            color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>密码登录</h2>
        <input type="text" v-model="ineerText" placeholder="手机/用户名">
        <input type="password" v-model="innerPwd" placeholder="密码">
        <button @click="log()">登录</button>
        <div>
            <span>手机号登录</span>
            <span>忘记密码</span>
        </div>
        <p><input type="checkbox">已阅读并同意 <span>《用户服务协议》、《隐私政策》</span></p>

    </div>
</body>
</html>
<script src="../vue-2.5.21.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            innerText:'',
            innerPwd:'',
            arr:[
                {uname:'www',pwd:'root'}
            ]
        },
        methods:{
            log(){
                this.innerText = this.arr.uname
                this.innerPwd = this.arr.pwd
            }
        }
    })
</script>